<template>
<div class="aboutcon">
    <div class="abimg1"><img src="../../img/abimg1.jpg"></div>
    <div class="abcont1">
        <div class="abcont1-con wow animated fadeInUp">
            <h2Title title1='companyprofile' title2='公司介绍'></h2Title>
            <div class="abcont1-2 clearfix">
                    <div class="abcont1-2img"><img src="/static/img/logo.8d814a8.png"></div>
                    <div class="abcont1-3">
                        <p class="tein48">宜城国投公司成立与2000年，是一家专门从事互联网软件研发的公司。从事软件研发已超过5年的研发经验，目前主要合作的品牌已经超过10余家，合作公司超过200家。</p>
                    </div>
            </div>
        </div>
    </div>
        <p class="abp-sty1 con"></p>
        <div class="abcont2 con">
            <h2Title title1='Scope business' title2='业务范围'></h2Title>
            <p class="abp-sty2">平台在网上开展业务，可以实现产品展示，销售，在线支付一条龙服务 进行商户交流、客户信息管理、简单订单管理</p>
            <div class="abcont2-1">
                <div class="abcont2l">
                    <div class="abcimg1">
                        <i class="img iconimg1"></i>
                        <p>网站建设、设计、托管、项目开发</p>
                    </div>
                </div>
                <div class="abcont2c">
                    <div class="abcimg2">
                        <i class="img iconimg1"></i>
                        <p>微信公众号制作</p>
                    </div>
                    <div class="abcimg3">
                        <i class="img iconimg1"></i>
                        <p>产品优化</p>
                    </div>
                    <div class="abcimg4">
                        <i class="img iconimg1"></i>
                        <p>网络推广</p>
                    </div>
                    <div class="abcimg5">
                        <i class="img iconimg1"></i>
                        <p>微信小程序定制</p>
                    </div>
                </div>
                <div class="abcont2r">
                    <div class="abcimg6">
                        <i class="img iconimg1"></i>
                        <p>APP开发</p>
                    </div>
                </div>
            </div>
        </div>
    <div class="abcont3">
        <div class="w1200 maau">
            <h2Title title1='Why did you choose us' title2='选择我们'></h2Title>
        <div class="abcont3-1">
            <div class="abcont3-con"><span class="fz48">6</span><span class="fz28">年</span><p class="psty2">建网经验</p></div>
            <div class="abcont3-con"><span class="fz48">24</span><span class="fz28">h</span><p class="psty2">售后服务</p></div>
            <div class="abcont3-con"><span class="fz48">400</span><span class="fz28">余</span><p class="psty2">技术人才</p></div>
            <div class="abcont3-con"><span class="fz48">60</span><span class="fz28">+</span><p class="psty2">服务城市</p></div>
            <div class="abcont3-con"><span class="fz48">72</span><span class="fz28">项</span><p class="psty2">技术标准</p></div>
        </div>
        </div>


    </div>
    <div class="abcont4 con wow animated fadeInDown">
         <h2Title title1='Enterprise Team' title2='企业团队'></h2Title>
         <div class="abcont4-con">
             <div class="img"><img src="../../img/abimg3.png"></div>
             <div class="abcont4-cont">
                 <div class="abcont4-cont1">
                 <p class="ab-tit5"><span>公司创始人 - 张合纵</span></p>
                 <p class="ab-tit6">十多年专业项目经验</p>
                 <p class="ab-tit7">文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 文本介绍文本介绍文本介绍文本介绍 文本介绍文本介绍文本</p>
             </div>
             </div>
         </div> 
         <div class="abcont4-con">
            <div class="abcont4-con2">
             <div class="abcont4-cont">
                 <p class="ab-tit5"><span>技术总监 - 李子胜</span></p>
                 <p class="ab-tit6">十多年IT行业经验</p>
                 <p class="ab-tit7">文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 文本介绍文本介绍文本介绍文本介绍 文本介绍文本介绍文本</p>
             </div>
              <div class="img"><img src="../../img/abimg4.png"></div>
            </div>
            <div class="abcont4-con3">
             <div class="abcont4-cont">
                 <p class="ab-tit5"><span>公司合伙人 - 曹深巷</span></p>
                 <p class="ab-tit6">十多年专业项目工程经验</p>
                 <p class="ab-tit7">文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 文本介绍文本介绍文本介绍文本介绍 文本介绍文本介绍文本</p>
             </div>
             <div class="img"><img src="../../img/abimg5.png"></div>
            </div>
         </div> 
    </div>
    <div class="abcont5">
        <h2Title title1='Cultural' title2='文化宗旨'></h2Title>
         <div class="abcont5-con con">
             <div class="abcont5-con1">
                 <p class="psty3">&mdash;&mdash;&mdash;&emsp;&emsp;企业精神 - 不断超越，追求完美</p>               
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
             </div>
             <img src="../../img/abimg8.png">
         </div>
         <div class="abcont5-con con">
            <img src="../../img/abimg7.png">
            <div class="abcont5-con2">
                    <p class="psty3">企业精神 - 不断超越，追求完美&emsp;&emsp;&mdash;&mdash;&mdash;</p>               
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
            </div>           
         </div>
    </div>
<foot></foot>
</div>
</template>
<script>
import h2Title from '../../components/h2Title'
import foot from '../../components/foot'
import {WOW} from 'wowjs'
export default {
    data:function(){
        return {
            list:'',
            description:'',
            logoimg:''
        }
    },
    components:{
        h2Title,
        foot
    },
    mounted(){
        new WOW().init() 
        this.companyload()
    },
    methods:{
        companyload:function(){
            
        },
    }
}
</script>
<style lang="less">
.mb5{
    margin-bottom: 5px;
    }
.abimg1{
    overflow: hidden;
    img{
    background-position: center; 
    }
    }
.abcont1{
    width: 1200px;
    border: solid 1px #cccccc;
    margin: -95px auto 0;
    position: relative;
    padding: 15px 25px;
    font-size: 24px;
    .abcont1-con{
    border: solid 1px #cccccc;
    background-color: #fff;
    padding-top: 35px;
    .abcont1-2{
    margin-top:40px;
    padding-bottom: 35px;
    .abcont1-2img{
        width: 407px;
        float: left;
        height: 318px;
        margin-left: 37px;
        margin-right: 42px;
        border-radius: 50px;
        background-color: #2172ca;
        border: 3px solid #dccd14;

    }
    img{ 
        width: 200px;
        height: 200px;
        margin-top: 30px;
        margin-top: 60px;
        margin-left: -5px;
    }
    }
    }
    }
.abcont2l,.abcont2c,.abcont2r{
    text-align: center;
    }
.abcont2{padding-top: 30px !important;}
.ab-tit1{
    color: #666666;
    text-transform: uppercase;
    padding-bottom: 5px;
    font-size: 24px;
    }
.ab-tit2{
    font-weight: bold;
    font-size: 24px;
    position: relative;
    &::before,&::after{
    position: absolute;
    height: 1px;
    background-color:currentColor;
    content: '';
    }
 
    }
.abcont1-3{
    display: inline-block;
    width: 665px;
    line-height: 54px;
    padding-right: 35px;
    text-align: left;
    }
.abp-sty1{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    height: 2px;
    background-color: #cccccc;
    position: relative;
    &::before{
    position: absolute;
    width: 230px;
    left: calc( 50% - 115px);
    height: 4px;
    background-color: #294cff;
    border-radius: 2px; 
    content: '';
    top:-1px;
    }
    }
.abicon1{
    position: relative;
    &::before{
    position: absolute;
    content: '';	
    width: 50px;
	height: 2px;
    background-color: #666666;
    left: calc( 50% - 25px);
    top:45px;
    }
    }
.abp-sty2{
    color: #999;
    font-size: 16px;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 30px;
}
.abcont2-1{display: flex;flex-direction: row;font-size: 16px;color: #fff;margin-top: 45px;}
.abcont2c{width: 580px;display: flex;flex-direction: row;flex-wrap:wrap}
.abcimg2,.abcimg3,.abcimg4,.abcimg5,.abcimg6{border-radius: 40px;}
.abcimg2,.abcimg4,.abcont2l,.abcont2c{margin-right: 15px;}
.abcimg2,.abcimg3{margin-bottom: 15px;}
.abcimg1{	
    width: 356px;
	height: 296px;
	background-color: #ff7269;
    border-radius: 60px;
    .img{
        width: 84px;
        height: 82px;
        background-position: 0px 0px;
        margin-top: 85px;
        margin-bottom: 20px;
    }}
.abcimg2{
    width: 340px;
	height: 140px;
    background-color: #edc44e;
    .img{
        width: 70px;
        height: 50px;
        background-position: -90px 0px;
        margin-top: 28px;
        margin-bottom: 10px;
    }
    }
.abcimg3{
    width: 220px;
	height: 140px;
    background-color: #6ed5a0;
    .img{
        width: 50px;
        height: 50px;
        background-position: -159px 0px;
        margin-top: 28px;
        margin-bottom: 10px;
    }
    }
.abcimg4{
    width: 220px;
	height: 140px;
	background-color: #19adeb;
    .img{
        width: 50px;
        height: 48px;
        background-position: -210px 0px;
        margin-top: 28px;
        margin-bottom: 8px;
    }
    }
.abcimg5{
    width: 340px;
	height: 140px;
	background-color: #dc9f5c;
    .img{
        width: 46px;
        height: 50px;
        background-position: -272px 0px;
        margin-top: 28px;
        margin-bottom: 15px;
    }

    }
.abcimg6{
    width: 222px;
	height: 296px;
	background-color: #5cdcda;
    .img{
        width: 70px;
        height: 70px;
        display: inline-block;
        background-position:  -328px 0px;
        margin-top: 90px;
        margin-bottom: 20px;
    }
    }
.iconimg1{
        display: inline-block;
        background-image: url(../../img/iconimg1.png);
        background-repeat: no-repeat;
}
.abcont3{
    color: #fff;
    background: url(../../img/abimg2.jpg) no-repeat center;
    margin-top: 50px;
    padding-top: 50px;
       }
.abcont2 .h2-tit1,.abcont1 .h2-tit1{color: #666;}
.abcont3-1{display: flex;flex-flow: row;justify-content: space-evenly;padding-bottom: 60px;padding-top: 30px;}
.fz48{font-size: 48px;}
.fz28{font-size: 28px;}
.psty2{font-size: 16px;}
.abcont4-con{
img{
        margin-right: -25px;
    position: relative;
    z-index: 2;
}}
.abcont4-cont{border-radius: 40px;opacity: 0.9;}
.abcont4-cont{
    background-image: linear-gradient(180deg, #fea29c 0%, #fe5d8c 100%);
    box-shadow: 1px 2px 9px 1px rgba(36, 125, 255, 0.34);
    font-size: 16px;
    .abcont4-cont1{	
    background-color: #ffffff;
	box-shadow: 1px 2px 9px 1px rgba(36, 125, 255, 0.34);
    border-radius: 40px;
    margin: 20px 40px;
    height: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    }
}
.ab-tit5{
	font-size: 16px;
	font-weight: bold;
    color: #333333;
    padding-top: 35px;
    span{position: relative;
    padding-bottom: 15px;
    display: inline-block;}
    span::before{
        position:absolute;
        width: 60px;
        height: 1px;
        background-color: currentColor;
        margin-left: calc(50% - 30px);
        bottom: 0px;
        content: '';
    }
    }
.ab-tit6{
    padding-top: 20px;
    padding-bottom: 15px;
}
.abcont4-con2{
    .abcont4-cont{
        	background-image: linear-gradient(0deg, 
		#04a8ff 0%, 
		#27d6c7 100%);
	box-shadow: 1px 2px 9px 1px 
		rgba(25, 173, 235, 0.34);
    }
    img{
    margin-left: -25px;
    margin-top: -50px;
}
.abcont4-cont{ width: 300px;padding-left: 20px;padding-right: 20px;}
}
.abcont4-con3{
    .abcont4-cont{	background-image: linear-gradient(180deg, 
		#9edaff 0%, 
		#8598fe 100%);
	box-shadow: 1px 2px 9px 1px 
        rgba(134, 154, 254, 0.34);}
        img{
        margin-left: -25px;
}
.abcont4-cont{ width: 300px;padding-left: 20px;padding-right: 20px; }
}
.abcont4-con2{margin-right: 40px;}
.abcont4-con3{margin-right: 20px;}
.abcont4{margin-top: 80px !important;}
.abcont4-con{
    margin-top: 80px;
    margin-bottom: 80px;
    img{margin-top: -40px;}
    }
.abcont5{
    background: url(../../img/abimg6.jpg) no-repeat center;
    color: #FFF;
    padding-top: 60px;
    padding-bottom: 55px;
    font-size: 16px;
    .h1Title{margin-bottom: 35px;}
    
    
    
    }
.abcont5-con,.abcont4-con3,.abcont4-con2,.abcont4-con{display: flex;flex-flow: row;}
.abcont5-con2{margin-left: 40px;}
.abcont5-con1{margin-right: 40px;}
.abcont5-con{
    p{text-transform: uppercase;line-height: 1.8;text-align:left;}
    }
.psty3{padding-bottom: 15px;}
.abcont5-con2{padding-top: 30px;}

</style>



